<template>
  <el-row class="addInfo" align="middle">
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="2">小区名称</el-col>
        <el-col :span="22"
          ><el-input v-model="xq.communityName" clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col>
      <el-row align="middle">
        <el-col class="name" :span="2">所属地区</el-col>
        <el-col :span="22" class="select">
          <el-cascader
            size="large"
            :options="regionData"
            v-model="selectedOptions"
            @change="addressChange"
          >
          </el-cascader>
        </el-col>
        <el-col class="name" :span="2"></el-col>
        <el-col :span="22"
          ><el-input
            v-model="xq.communityAddress"
            placeholder="请输入详细地址"
            clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="2">门店坐标</el-col>
        <el-col :span="22">
          <el-row align="middle">
            <el-col :span="2"
              ><el-button @click="getAddress">获取位置</el-button></el-col
            >
            <el-col :span="12" :offset="2">{{ address }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="button">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button></el-col
        >
      </el-row>
    </el-col>
  </el-row>
</template>

<script >
</script>

<script setup >
import { regionData, codeToText } from "element-china-area-data";

import axios from "axios";
import { defineProps, ref, reactive, watchEffect, defineEmits } from "vue";
import { ElMessage } from "element-plus";

function adressNull() {
  ElMessage({
    message: "你没输地址，不允许获取位置o_O",
    type: "error",
    plain: true,
  });
}

const emits = defineEmits(["update", "only", "request"]);
const props = defineProps(["info"]);
let xq = ref({});

watchEffect(function () {
  xq.value = { ...props.info };
});
let selectedOptions = [];
let allAddress = "";
const addressChange = function (arr) {
  allAddress = codeToText[arr[0]] + codeToText[arr[1]] + codeToText[arr[2]];
  xq.value = {
    ...xq.value,
    communityCity: codeToText[arr[1]],
    communityCoordinates: allAddress,
    communityDistrict: codeToText[arr[2]],
    communityProvince: codeToText[arr[0]],
  };
  //   console.log(allAddress);
  //   console.log(xq.value);
};
watchEffect(function () {
  xq.value = reactive(xq.value, xq.value.communityName, xq.value.address);
});
const cancel = function () {
  xq.value = {};
  selectedOptions = [];
  emits("only", false);
};
let address = ref();
const getAddress = async function () {
  try {
    if (xq.value.communityCoordinates == undefined) {
      adressNull();
      //   alert("请输入详细地址！");
    } else {
      let res = await axios.get(
        `https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${xq.value.communityCoordinates}`
      );
      address.value = res.data.geocodes[0].location;
      //经纬度赋值刷新
      xq.value.communityLatitude = address.value.split(",")[1];
      xq.value.communityLongitude = address.value.split(",")[0];
      watchEffect(function () {
        if (
          xq.value.communityLatitude == undefined ||
          xq.value.communityLongitude == undefined
        ) {
          address.value = "";
        } else {
          address.value =
            xq.value.communityLatitude + "," + xq.value.communityLongitude;
        }
      });
    }
  } catch (error) {
    alert("获取不到地址！");
  }
};
const save = async function () {
  let res = await axios.post(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate",
    {
      addOrUpdateFlag: 1,
      ...xq.value,
    }
  );
  emits("only", false);
  emits("request");
};
</script>




<style lang="less" scoped>
.col {
  margin: 10px 0;
  .row {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
.name {
  padding-right: 8px;
}
.select {
  margin-bottom: 10px;
}
.button {
  text-align: right;
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>